<template>
  <div class="statisticsContent">
    <div class="top">
      <p>年度开销统计总览 :</p>
    </div>
    <div class="charts" ref="statistics"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from 'vue'
import * as echarts from 'echarts'

const props = withDefaults(
  defineProps<{
    statisticsList: any
  }>(),
  {
    statisticsList: []
  }
)

const statisticsNameList = ref([])
const statisticsValueList = ref([])

const statistics = ref()

const mkCharts = () => {
  const myCharts = echarts.init(statistics.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '15%',
      left: '10%',
      right: '10%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      show: true,
      axisLabel: {
        show: true
      },
      splitLine: { show: false },
      axisLine: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      inverse: true, // 倒叙
      axisLabel: {
        color: 'rgba(239, 228, 182)',
        fontSize: 20,
      },
      axisLine: {
        show: false // 轴线
      },
      axisTick: {
        show: false // 刻度线
      },
      data: statisticsNameList.value
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 50,
        showBackground: false,
        barMaxWidth: 35,
        barMinWidth: 25,
        itemStyle: {
          // borderRadius: [0, 10, 10, 0],
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: 'rgba(239, 228, 182, 0.8)' },
            { offset: 1, color: 'rgba(239, 228, 182, 0.95)' }
          ]),
        },
        data: statisticsValueList.value
      }
    ]
  }
  myCharts.setOption(option)
}


watch(props, () => {
  if (props.statisticsList) {
    props.statisticsList.forEach((item) => {
      if (item.id) {
        statisticsNameList.value.push(item.id)
        statisticsValueList.value.push(item.money)
      }
    })
    mkCharts()
  }
})

onMounted(() => {
  // mkCharts()
})

</script>

<style lang="scss" scoped>
.statisticsContent {
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding-right: 10px;

  .top {
    margin-bottom: 30px;

    p {
      color: #fbefb8;
      font-size: 30px;
      font-weight: 500;
    }
  }

  .charts {
    background: #2c1413;
    opacity: 0.6;
    width: 100%;
    height: 350px;
  }
}
</style>